<template>
	<view>
		<!-- <scroll-view v-if="!isFullPage" scroll-y="true" class="content"> -->
		<scroll-view v-if="true" class="search-doc-lay" scroll-y="true">
			<checkbox-group @change="checkboxChange">
				<view class="doc-item" v-for="(item,index) in docList" :key="index">
					<!-- <uni-tag :text="item.title" /> -->
					<view class="item-one">
						<view style="display: flex;flex-direction: row;" @tap="onInfoClick(item)">
							<image class="item-img" :src="genDocItemPic(item)"></image>
							<view class="item-name">{{item.name}}</view>
						</view>
						<checkbox :value="item.id" :checked="item.checked"></checkbox>
					</view>
					<view class="item-cutoff"></view>
				</view>
				<view style="background: #F8F8F8; height: 250upx;"></view>
			</checkbox-group>
		</scroll-view>

		<!-- </scroll-view> -->

		<documentBottomMenu v-if="showSelectAll" @onEntryClick="onEntryClick" :selectList="selectDocIds">

		</documentBottomMenu>


		<!-- 提交信息 -->
		<uni-popup ref="renameDialog" type="dialog">
			<uni-popup-dialog mode="input" title="重命名" value="" placeholder="请输入内容" @confirm="onFileNameChangeOkClick"></uni-popup-dialog>
		</uni-popup>

		<!-- info -->
		<uni-popup ref="infoPopup" type="bottom" :animation="true">
			<view class="info-content">
				<view class="head-file">
					<image class="item-img" :src="genDocItemPic(selectedItem)"></image>
					<view class="item-name" style="margin-left: 24upx;">{{selectedItem.name}}</view>
				</view>
				<view class="info-cutoff"></view>

				<view>
					<view class="info-line">
						<view class="info-title">文档编号</view>
						<view class="info-value">{{selectedItem.id}}</view>
					</view>
					<view class="info-line">
						<view class="info-title">修改时间</view>
						<view class="info-value">{{selectedItem.modifyTime}}</view>
					</view>
					<view class="info-line">
						<view class="info-title">文档大小</view>
						<view class="info-value">{{selectedItem.size}}</view>
					</view>
					<view class="info-line">
						<view class="info-title">修改人</view>
						<view class="info-value">{{selectedItem.userName}}</view>
					</view>
					<view class="info-line">
						<view class="info-title">文档类型</view>
						<view class="info-value">{{selectedItem.ext}}</view>
					</view>
					<view class="info-line">
						<view class="info-title">备注</view>
						<view class="info-value">{{selectedItem.remark}}</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- update -->
		<uni-popup ref="updatePopup" type="dialog" :animation="true">
			<view class="update-content">
				<view class="head-file">
					<image class="item-img" :src="docIconUrl"></image>
					<view class="item-name" style="margin-left: 24upx;">更新文件</view>
				</view>
				<view class="info-cutoff"></view>
				<view class="text-area">
					<text class="title" @tap="selectFileHandler">点击此处选择文件</text>
					<view class="title">{{selectList.length == 0 ? " " : selectList[0].name}}</view>
				</view>
				<view>
					<yt-uploads ref="updateFile" :options="updateOptions" @selected="selectedHandler" @success="succesHandler" @fail="failHandler"
					 @process="processHandler"></yt-uploads>
				</view>

				<view class="update-buttons">
					<view class="update-button-cancel" @click="updateFileCancel">取消</view>
					<view class="update-button-ok" @click="updateFileOk">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import ytUploads from "@/components/yt-uploads/yt-uploads.vue"
	import documentBottomMenu from './documentBottomMenu.vue'
	import CONSTS from '@/common/biz/consts.js'
	import Http from '@/common/http';
	
	import test_doclist from "@/common/test_jsons/test_doclist.js"
	import {
		searchEnterPriseDoc,
		GetOctpusEnterPriseDataList,
		DeleteEnterPriseData,
		UpdateDocEntDocName,
		downLoadDocs
	} from '@/services/document.js';
	
	import fileUtil from "@/utils/fileUtil.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
			documentBottomMenu,
			ytUploads
		},
		
		computed: {
			...mapState(['userInfo'])
		},
		
		props:{
			searchPid: {
				type:String,
			},
			strInput:{
				type:String,
			}
			// searchPid: '0',
			// src: {
			// 	type: String
			// },
		},
		
		data() {
			return {
				searchIconUrl: '/static/' + 'icon_search.png',
				changeIconUrl: '/static/' + 'icon_navigation_switch.png',
				messageIconUrl: '/static/' + 'icon_navigation_news.png',
				docIconUrl: '/static/' + 'icon_doc.png',
				pdfIconUrl: '/static/' + 'icon_pdf.png',
				clearUrl: '/static/' + 'icon_delect.png',
				selectDocIds: [],
				showSelectAll: false,

				webviewStyles: {
					progress: {
						color: 'red'
					}
				},

				searchPage: 0,
				// strInput: '',
				// docList: test_doclist.data.list,
				docList: [],
				selectedItem: {},

				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},



				// update
				// http://101.201.235.48:8001/api/Doc/UpdateDocVersion
				// DID: 213
				// FileUpdateUser: admin
				// PID: 43
				// PPath: 1/35/43/
				// formfile: (binary)
				updateOptions: {
					host: CONSTS.STATICHOST + "api/Doc/UpdateDocVersion",
					autoUpload: false,
					type: 2,
					count: 1,
					data: {
						type: 2,
					},
					beforeUpload: (ret) => {
						console.log("before", "true")
						console.log(ret)
						this.start = true
						return true
					},
					headers: {
						// Authorization: 'a442e8d1-a182-4c3c-9f10-ce945a9ec454',
						access_token: Http.token,
					}
				},

				selectList: [],
				start:false
			}
		},
		
		watch: {
			selectDocIds(val) {
				if (val.length == 0) {
					this.showSelectAll = false;
				} else {
					this.showSelectAll = true;
				}
			}
		},
		
		mounted(e) {
			this.getDirList(this.searchPage + 1, this.searchPid ,this.strInput);
		},
		
		onReachBottom() {
			this.getDirList(this.searchPage + 1, this.searchPid ,this.strInput);
		},
		
		methods: {
			onMessageClick() {
				uni.navigateTo({
					url: "/pages/message/index"
				})
			},
			reLoadListData() {
				this.searchPage = 0;
				this.docList = [];
				this.selectDocIds = [];
				this.getDirList(this.searchPage + 1, this.searchPid);
			},
		
			searchListData() {
				this.searchPage = 0;
				this.docList = [];
				this.selectDocIds = [];
				this.getDirList(this.searchPage + 1,this.searchPid,this.strInput);
			},
		
			doGetDocListByStr(str, page) {
		
			},
		
			newFolderDialogInputConfirm(done, val) {
				// this.$refs.newFolderDialog.close();
				console.log(done)
				console.log(val)
				done();
			},
		
			checkboxChange(e) {
				// console.log("checkboxChange")
				// console.log(e);
				this.selectDocIds = e.detail.value;
		
				var items = this.docList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.id)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
		
			onInfoClick(e) {
				console.log("onInfoClick")
				if (e.fileType == 2) {
					uni.navigateTo({
						url: '/pages/document/documentSubDir?searchPid=' + e.id + '&dirName=' + e.name,
						// url:'/pages/about/about?pid=' + e
					})
				} else {
					console.log("open file")
				}
			},
		
			onSelectAllClick() {
				// debugger
				for (var i = 0; i < this.docList.length; i++) {
					// this.docList[i].checked = true;
					const item = this.docList[i]
					this.$set(item, 'checked', true)
				}
			},
		
			onEntryClick(e) {
				let pos = e.position;
				switch (pos) {
					case 0: // download
						this.menuDownload();
						break;
					case 1: // update
						this.menuUpdate();
						break;
					case 2: // rename
						this.menuRename();
						break;
					case 3: // delete
						this.menuDelete();
						break;
					case 4: // info
						this.menuInfo();
						break;
				}
			},
		
			menuDownload() {
				var items = this.docList;
				let tempItem = null;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].checked == true) {
						tempItem = items[i];
						break;
					}
				}
				
				if(tempItem.ext == "svg") {
					uni.navigateTo({
						url:'/pages/drawing/drawingShow?url=' + tempItem.path + '&title=' + tempItem.name
					})
					return;
					// url: '/pages/drawing/drawingShow?url=' + e.PathUrl + '&title=' + e.Name
					
				}
		
				downLoadDocs(tempItem.docPaht, (res) => {
					console.log(res);
					let tempFile = res.tempFilePath;
					console.log("tempFile = " + tempFile);
		
					uni.openDocument({
						filePath: res.tempFilePath,
						success: function() {
							console.log('打开文档成功');
						},
						fail: function() {
							console.log('打开文档失败');
						}
					});
				})
			},
		
			menuUpdate() {
				// uni.showModal({
				// 	title: '更新提示',
				// 	content: '是否进行文件版本更新？',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('确定');
				// 		} else if (res.cancel) {
				// 			console.log('取消');
				// 		}
				// 	}
				// });
				this.$refs.updatePopup.open();
			},
		
			menuDelete() {
				var _self = this;
				uni.showModal({
					title: '删除提示',
					content: '是否删除选中文件？',
					success: function(res) {
						if (res.confirm) {
							_self.doDeleteFiles();
						} else if (res.cancel) {}
					}
				});
			},
		
			doDeleteFiles() {
				// DeleteEnterPriseData
				var params = {};
				params.id = [];
				console.log(this.selectDocIds)
				for (var i = 0; i < this.selectDocIds.length; i++) {
					params.id.push(
						this.selectDocIds[i]
					)
				}
				// debugger
				params.userID = this.userInfo.id;
				// return;
		
				uni.showLoading({
					title: '加载中'
				})
				DeleteEnterPriseData(params).then((res) => {
					if (res.code == '000000') {
						this.reLoadListData();
					}
					uni.showToast({
						title: res.msg
					})
					uni.hideLoading();
				});
			},
		
			menuRename() {
				this.$refs.renameDialog.open();
			},
		
			menuInfo() {
				var items = this.docList;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].checked == true) {
						this.selectedItem = items[i];
						break;
					}
				}
				this.$refs.infoPopup.open()
			},
		
			genDocItemPic(item) {
				// debugger
				let rePic = '/static/file_icons/icon_other.png';
				if (item.fileType == 2)
					return '/static/file_icons/icon_dir.png';
		
				if (item.ext == null)
					return rePic;
		
				rePic = fileUtil.getTypeIconByFile(item.ext.toLowerCase());
				// if (suffix == 'pdf') {
				// 	rePic = "/static/icon_pdf.png"
				// } else if (suffix == 'doc' || suffix == 'docx') {
				// 	rePic = "/static/icon_doc.png"
				// } else if (suffix == 'dwg') {
				// 	rePic = "/static/icon_dwg.png"
				// } else if (suffix == 'svg') {
				// 	rePic = "/static/icon_svg.png"
				// }
				return rePic;
			},
		
			getDirList(inPage, inPid ,inKey) {
				if (inPid == null) {
					return;
				}
		
				uni.showLoading({
					title: '加载中'
				})

				
				if(inKey) {
					inPid = null;
				}
				GetOctpusEnterPriseDataList({
					fileName:inKey,
					parentID: inPid,
					pageIndex: inPage,
					pageSize: CONSTS.PAGE_DEFAULT_LIMIT,
					fileType:0
				}).then((res) => {
					if (res.code == '000000') {
						// debugger
						if (inPage == 0)
							this.docList = [];
						let tempData = res.data;
						this.docList = this.docList.concat(tempData);
						if(tempData.length > 0)
							this.searchPage = this.searchPage + 1;
					} else {
		
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
		
			searchDirList(inPage, inStr, inKey) {
				uni.showLoading({
					title: '加载中'
				})
		
		// 		searchEnterPriseDoc({
		// 			:
		// 			searchKey: inStr,
		// 			page: 0,
		// 			limit: CONSTS.PAGE_DEFAULT_LIMIT * 1000,
		// 		}).then((res) => {
		// 			if (res.code == '000000') {
		// 				// debugger
		// 				if (inPage == 0)
		// 					this.docList = [];
		// 				let tempData = res.data;
		// 				this.docList = this.docList.concat(tempData);
		// 				this.searchPage = this.searchPage + 1;
		// 			} else {
		
		// 			}
		// 			uni.hideLoading();
		// 		});
			},
		
			onFileNameChangeOkClick(done, value) {
				// 输入框的值
				console.log(value)
				// debugger
		
				if (value.length == 0) {
					uni.showToast({
						title: "请输入有效名字"
					})
					return;
				}
		
				if (this.selectDocIds.length != 1) {
					uni.showToast({
						title: "请选择一个文件"
					})
					return;
				}
		
				var items = this.docList,
					values = this.selectDocIds,
					fileExt = '';
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.id)) {
						fileExt = item.fileSuffix
					}
				}
		
				this.requestRenameFile(value);
				done()
			},
		
			requestRenameFile(inFileName) {
				var params = {};
				for (var i = 0; i < this.selectDocIds.length; i++) {
					params.id = this.selectDocIds[i];
					break;
				}
				var _self = this;
				params.fileName = inFileName;
				// params.fileUpdateUser = this.userInfo.userEntity.account;
				params.fileName = inFileName;
		
				UpdateDocEntDocName(params).then((res) => {
					if (res.code == '000000') {
						// debugger
						this.reLoadListData();
					} else {
						uni.showToast({
							title: res.msg
						})
					}
					uni.hideLoading();
				});
		
			},
			
			
			selectFileHandler(){ // 选择文件方法调用组件的select方法
				// 初始化数据
				console.log("selectFileHandler")
				this.selectList = []
				this.start = false
				this.$refs.updateFile.select()
			},
		
			selectedHandler(ret) { // 组件选择文件回调 返回值 [{path:"文件路径",state:0,size:"文件大小"}...]
				this.selectList = ret
				console.log("seleted", JSON.stringify(ret))
			},
		
			processHandler(ret) { // 组件每个文件的上传状态 返回值{index:0,state:1(上传成功)|2(上传失败)}
				// this.$set(this.selectList[ret.index],"state",ret.state)
				console.log("processing", ret)
			},
		
			succesHandler(ret) { // 所有文件上传结束后回调 返回值 [{ajax返回的数据}...]
				console.log("success", ret)
			},
		
			failHandler(ret) { // 失败回调 返回值 {type:0,data:"错误信息"} 上传失败不会在这里显示错误信息，统一在success中处理
				console.log("fail", ret)
			},
			
			updateFileOk() {
				console.log("updateFileOk")
				if (this.selectDocIds.length != 1) {
					uni.showToast({
						title: "请选择一个文件"
					})
					return;
				}
				
				var items = this.docList,
					values = this.selectDocIds,
					selectedO = {};
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.id)) {
						selectedO = item
					}
				}
				this.updateOptions.data.DID = item.id;
				this.updateOptions.data.FileUpdateUser =  this.userInfo.userEntity.account
				this.updateOptions.data.PID =  this.searchPid
				this.updateOptions.data.PPath =  item.pPath
				
				this.$refs.updateFile.upload()
			},
			
			updateFileCancel() {
				
			}
		}
	}
</script>

<style scoped lang='scss'>
	.page-header {
		height: 88upx;
		background-color: #2C405A;
		z-index: 1000;
	}

	.search_box {
		width: 550upx;
		height: 32px;
		background: rgba(0, 0, 0, 0.04);
		border-radius: 4px;
		filter: blur(0px);


		padding-left: 30upx;
		margin-left: 32upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search_tip {
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 17px;
	}

	.search_icon {
		width: 40upx;
		height: 40upx;
	}

	.right-text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 20px;
		margin-right: 30upx;
	}

	.right_icon {
		width: 32upx;
		height: 32upx;
		padding: 15upx;
		border-radius: 25px;
		border: 1px solid rgba(255, 255, 255, 1.0);
		margin-right: 20upx;
		background-color: #FFFFFF;
	}

	.search-doc-lay {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		height: 90vh;
	}

	.item-one {
		display: flex;
		flex-direction: row;
		padding: 30upx;
		justify-content: space-between;
	}

	.item-img {
		width: 50upx;
		height: 50upx;
	}

	.item-name {
		font-size: 32upx;
		width: 70vw;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		margin-left: 48upx;

	}

	.item-cutoff {
		width: 95vw;
		height: 2upx;
		margin-left: 5vw;
		background-color: #D3D3D3;
	}

	.info-content {
		padding: 32upx;
		background: #FFFFFF;
		border-radius: 10px 10px 0px 0px;
	}

	.head-file {
		display: flex;
		flex-direction: row;
	}

	.item-name {
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		line-height: 22px;
	}

	.info-cutoff {
		height: 1px;
		background: rgba(0, 0, 0, 0.07);
		box-shadow: 0px 1px 0px 0px #FFFFFF;
		margin-top: 32upx;
		margin-bottom: 32upx;
	}

	.info-title {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 17px;
	}

	.info-value {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 17px;
	}

	.info-line {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24upx;
	}

	.update-content {
		padding: 32upx;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
	}
	
	.update-buttons {
		padding: 10upx 100upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.update-button-ok {
			color: #007AFF;
		}
		
		.update-button-cancel {
			color: #8F8F94;
		}
	}
</style>

